<template>
  <div class="amap_maps">
    <div class="amap_drgs" id="container"></div>
    <div class="scenery_list">
      <el-tabs v-model="activeName" @tab-click="currentTab">
        <el-tab-pane label="风景" name="风景">
          <ul>
            <li
              v-for="(item, index) in mapList"
              :key="index"
              @mouseenter="moveLocation(item)"
            >
              <div class="site">{{ item.title }}</div>
              <div class="distance">
                {{ (item.distance / 1000).toFixed(2) }}公里
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="交通" name="交通">
          <ul>
            <li
              v-for="(item, index) in mapList"
              :key="index"
              @mouseenter="moveLocation(item)"
            >
              <div class="site">{{ item.title }}</div>
              <div class="distance">{{ item.distance }}米</div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import LoginFormVue from "../user/LoginForm.vue";
export default {
  props: ["hotelLocation", "name"],
  data() {
    return {
      activeName: "风景",
      markerList: [],
      mapList: [],
      map: null,
      placeSearch: null,
      infoWindow: null, //
    };
  },
  async mounted() {
    let mapKey = "804d9de0080afe2394dde54a0b4dc7ec";
    let url = `https://webapi.amap.com/maps?v=1.4.15&key=${mapKey}&callback=onLoad`;
    window.onLoad = () => {
      var position = new AMap.LngLat(
        this.hotelLocation.longitude,
        this.hotelLocation.latitude
      );
      this.map = new AMap.Map("container", {
        center: position,
        zoom: 11,
      });
      this.infoWindow = new AMap.InfoWindow({
        autoMove: true,
        offset: { x: 0, y: -30 },
      });
      this.infoWindow.setContent(this.name);
      this.infoWindow.open(this.map, position);
      this.mapSearch();
    };
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
  // -------------------------------------------------
  methods: {
    // tab栏切换
    currentTab() {
      if (this.activeName === "交通") {
        this.placeSearch.clear();
        this.map.setZoom(14);
        this.mapSearch();
        this.infoWindow.close();
      } else if (this.activeName === "风景") {
        this.placeSearch.clear();
        this.map.setZoom(11);
        this.mapSearch();
        this.infoWindow.close();
      }
    },
    // tab栏内容hover事件
    moveLocation(data) {
      let x = data.location.x;
      let y = data.location.y;
      var position = new AMap.LngLat(x, y); // 标准写法
      this.map.setCenter(position);
      this.infoWindow.setContent(data.title);
      this.infoWindow.open(this.map, position);
    },

    mapSearch() {
      AMap.service(["AMap.PlaceSearch"], () => {
        //构造地点查询类
        this.placeSearch = new AMap.PlaceSearch({
          type: this.activeName, // 兴趣点类别
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          // citylimit: true, //是否强制限制在设置的城市内搜索s
          map: this.map, // 展现结果的地图实例
          // panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        var cpoint = [
          this.hotelLocation.longitude,
          this.hotelLocation.latitude,
        ]; //中心点坐标
        this.placeSearch.searchNearBy("", cpoint, 2000, (status, result) => {
          this.mapList = result.poiList.pois.map((item) => {
            return {
              title: item.name,
              location: {
                x: item.location.R,
                y: item.location.Q,
              },
              distance: item.distance,
            };
          });
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.amap_maps {
  margin: 20px 0;
  display: flex;
  .amap_drgs {
    width: 650px;
    height: 360px;
    border: 1px solid;
  }
  // 地址列表
  .scenery_list {
    flex: 1;
    padding-left: 20px;
    ul {
      height: 320px;
      overflow-y: scroll;
      li {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #666;
        padding: 10px;
        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}
</style>